<template>
  <div>
    <ux-grid ref="singleTable" :data="prposTabelData" style="width: 100%" border :header-cell-style="{
      color: 'rgba(0, 0, 0, 0.85)',
      fontSize: '14px',
      textAlign: 'left',
      fontWeight: 'bold',
      padding: 0,
      height: '32px',
    }" :row-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '13px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" :cell-style="cellStyle" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight"
      v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
      :element-loading-text="$t('message.bhView.loading')">
      <template slot="empty"> No Data </template>

      <ux-table-column title="利用状況" :resizable="false" width="80" align="left" fixed="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.useCase }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="ライン№" :resizable="false" width="250" align="left" fixed="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.lineNo }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="FROM" :resizable="false" width="160" align="left" fixed="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.froms }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="TO" :resizable="false" width="160" align="left" fixed="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.tos }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="C.L.番号" :resizable="false" width="250" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.clNo }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column title="サイズ" :resizable="false" width="120" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.siz }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="Sch" :resizable="false" width="80" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.sch }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="レーティング" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.rait" placement="top-start">
            <p style="white-space: pre;">
              {{ scope.row.rait }}
            </p>
          </el-tooltip>
        </template>
      </ux-table-column>
      <ux-table-column title="ラインクラス" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.lCCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="材質分類" :resizable="false" width="200" align="left">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.mate" placement="top-start">
            <p style="white-space: pre;">
              {{ scope.row.mate }}
            </p>
          </el-tooltip>
        </template>
      </ux-table-column>
      <ux-table-column title="一般材質" :resizable="false" width="120" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.adminCost }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="流体名称" :resizable="false" width="120" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.fluidName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="設計圧力" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.desPressure }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="設計温度" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.desTemperature }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="運転圧力" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.runPressure }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="運転温度" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.runTemperature }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="影響度" :resizable="false" width="80" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.imCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="主適用法規" :resizable="false" width="200" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.law }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="他適用法規１" :resizable="false" width="120" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.law1 }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="他適用法規２" :resizable="false" width="120" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.law2 }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="塗装" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.crCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="外装材" :resizable="false" width="100" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.ouCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="熱処理" :resizable="false" width="80" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.htCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="SR実施済" :resizable="false" width="80" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.srDtlData }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="スチームトレース" :resizable="false" width="80" align="left">
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.stDtlData }}
          </p>
        </template>
      </ux-table-column>

    </ux-grid>
    <div class="bottomView">{{ pageDes }}</div>
  </div>
</template>

<script>
// import $ from 'jquery'
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';

// 导出模块
export default {
  // 模块名字
  name: "MSDetailTabel",
  props: {
    tableHeight: Number,
    prposTabelData: Array,
    pageDes: String,
    LAB: Array,
    loading: Boolean,
    tabelDataConfig: Array,
    empty: String,
    Month: Object,
    currentDiff: Number,

  },
  // 模块数据
  data() {
    //数据
    return {
      DateList: [],
      activeNum: 0,

      currentRow: {},
      nextRow: {},
      currentIndex: 0,
      nextIndex: 0,
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    prposTabelData: {
      immediate: true,
      handler(nData) {

      },
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    // 表格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let style = {
        color: "rgba(96,98,102,1)",
        fontSize: "14xpx",
        textAlign: "left",
        padding: 0,
        height: "32px"
      };
      return style;
    },

    handleCurrentChange(val) {
      console.log(val)
      //  true未更改
      eventBus.$emit('getDialog1Current_EventBus');

      /**
       * 未更改，则正常执行。=>记录当前的row和index
       * 已更改，记录需要的东西。=》记录下次的row和index，记录执行的Fn,通知弹框。
       * 此处通过index来选中，row可能存在_row表格自动添加的属性影响，导致选不中。
       */

      if (this.$store.state.isCurrentNext) {
        this.$emit("getMSTabelRow", val);
        this.currentRow = _.cloneDeep(val);
        this.currentIndex = this.getIndex(this.currentRow);
      } else {
        console.log('sdfsdfsdf', this.currentRow, this.currentIndex);

        this.nextRow = _.cloneDeep(val);
        // this.nextIndex = this.getIndex(this.nextRow);
        this.setCurrentFn(this.currentRow, this.currentIndex);

        let Fn = () => {
          this.currentRow = _.cloneDeep(val);
          this.currentIndex = this.getIndex(val);

          this.$emit('GetLineIndexListApi', this.nextRow.lineNo);
        }
        this.$store.commit("changeIsCurrentFn", Fn);
        eventBus.$emit('saveFnDialog1Current_EventBus');
      }
    },

    getIndex(row) {
      var result = 0;
      this.prposTabelData.forEach((item, index) => {
        if (_.isEqual(item, row)) {
          result = index;
        }
      })
      return result
    },

    //  通过name设置当前行
    setCurrentFn(row, index) {
      this.$refs.singleTable.setCurrentRow(this.prposTabelData[index]);
      if (index >= 9) {
        this.$refs.singleTable.pagingScrollTopLeft((index - 2) * 33);
      }
    },

    load() { },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {

  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() {

  },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-text {
  width: 100%;
  height: 100%;
  text-align: right;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.sizeColor {
  color: rgb(22, 22, 255);
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//   background-color: #e6f7ff;
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
  border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
  box-shadow: none;
}

::v-deep .el-table__body tr.current-row>td {
  background-color: rgb(233, 236, 237);
}

.tiemFlgS {
  font-size: 20px;
  font-family: "Menlo, Monaco, Courier New, monospace";
  line-height: 24px !important;
  text-align: center;
  height: 24px;
}

.bottomView {
  // background-color: #e9e9e9;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
}
</style>
